<template>
  <div class="app-container">
    <!-- 页头标题 -->
    <h1>用户管理系统</h1>

    <!-- 查询 数据添加-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="xiaolong"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="formInline.age" placeholder="18"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="formInline.sex" placeholder="男"></el-input>
      </el-form-item>
      <el-form-item label="权限">
        <el-select v-model="formInline.role" placeholder="user">
          <el-option label="user" value="user"></el-option>
          <el-option label="admin" value="admin"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="dialogFormVisibleAdd = true"
          >添加数据</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      max-height="1000"
    >
      <el-table-column type="selection" width="55" />

      <el-table-column align="center" label="序号">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column label="姓名">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>

      <el-table-column label="年龄" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.age }}</span>
        </template>
      </el-table-column>

      <el-table-column label="性别" align="center">
        <template slot-scope="scope">
          {{ scope.row.sex }}
        </template>
      </el-table-column>

      <el-table-column label="权限" align="center">
        <template slot-scope="scope">
          {{ scope.row.role }}
        </template>
      </el-table-column>

      <el-table-column align="center">
        <template slot="header" slot-scope="scope">
          <!-- <el-input v-model="search" size="mini" placeholder="输入关键字搜索" /> -->
          操作
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="initFormData(scope.$index)"
            >修改</el-button
          >
          <el-button size="mini" type="danger" @click="open(scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 修改信息 -->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input
            v-model="form.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input
            v-model="form.sex"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input
            v-model="form.age"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="权限" :label-width="formLabelWidth">
          <el-select v-model="form.role" placeholder="user" auto-complete="off">
            <el-option label="user" value="user"></el-option>
            <el-option label="admin" value="admin"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加用户 -->
    <el-dialog title="添加用户" :visible.sync="dialogFormVisibleAdd">
      <el-form :model="formAdd">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="formAdd.name" autocomplete="off" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input v-model="formAdd.sex" autocomplete="off" placeholder="性别"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="formAdd.age" autocomplete="off" placeholder="年龄"></el-input>
        </el-form-item>
        <el-form-item label="权限" :label-width="formLabelWidth">
          <el-select
            v-model="formAdd.role"
            placeholder="user"
            auto-complete="off"
          >
            <el-option label="user" value="user"></el-option>
            <el-option label="admin" value="admin"></el-option>
          </el-select>
          <!-- <el-input v-model="formAdd.role" autocomplete="off"></el-input> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页器 -->
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="list.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getList, delUser, updateUser, queryUser, addUser } from "@/api/user";
import cancelTokenMixin from "@/utils/cancelTokenMixin";
import {
  Table as elTable,
  TableColumn as elTableColumn,
  Input as elInput,
  Popconfirm as elPopconfirm
} from "element-ui";
export default {
  mixins: [cancelTokenMixin],
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      list: [],
      listLoading: true,
      search: "",
      dialogTableVisible: false,
      dialogFormVisibleAdd: false,
      dialogFormVisible: false,
      nowId: 0,
      form: {
        name: "",
        sex: "",
        age: "",
        role: "",
        id: "",
        update_at: ""
      },
      formAdd: {
        name: "",
        sex: "",
        age: "",
        role: "",
        id: "",
        create_at: ""
      },
      formInline: {
        name: "",
        sex: "",
        age: "",
        role: ""
      },
      formLabelWidth: "120px",
      currentPage: 1,
      currentIndex: "",
      pagesize: 10
    };
  },
  components: {
    elTable,
    elTableColumn,
    elInput,
    elPopconfirm
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      this.listLoading = true;
      await getList(this.formInline).then(response => {
        // console.log(response);
        this.list = response.data;
        this.listLoading = false;
        // console.log(this.list);
      });
    },
    initFormData(id) {
      this.dialogFormVisible = true;
      this.nowId = (this.currentPage - 1) * this.pagesize + id;
      this.form.name = this.list[this.nowId].name;
      this.form.age = this.list[this.nowId].age;
      this.form.sex = this.list[this.nowId].sex;
      this.form.role = this.list[this.nowId].role;
    },
    handleEdit() {
      this.dialogFormVisible = false;
      this.form.id = this.list[this.nowId].id;
      this.form.update_at = new Date(+new Date() + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
      // console.log(this.form)
      updateUser(this.form);
      this.$router.go(0);
    },
    handleDelete(index) {
      delUser(this.list[index].id);
      this.$router.go(0);
    },
    onSubmit() {
      queryUser(this.formInline).then(res => {
        this.list = res.data;
      });
    },
    handleAdd() {
      this.dialogFormVisibleAdd = false;
      this.formAdd.id = this.list.length;
      this.formAdd.create_at = new Date(+new Date() + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
      // console.log(this.formAdd.time);
      addUser(this.formAdd);
      this.$router.go(0);
    },
    open(index) {
      this.$confirm("删掉了就找不回来了哦-。-", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
            onclose: this.handleDelete(index)
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
};
</script>

<style>
h1 {
  width: 100%;
  display: block;
  line-height: 1.5em;
  overflow: visible;
  font-size: 22px;
  text-shadow: #f3f3f3 1px 1px 0px, #b2b2b2 1px 2px 0;
}
</style>
